<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}     /* 去掉默认的样式 */
        ul{ list-style: none;}        /*  去掉ul的强制 点 . 去掉*/
        img{ display: block ;}        /* 图片转成 块 */
        a{ text-decoration: none; color: #666;}  /* a链接不添加下划线，添加颜色 */
        h1,h2,h3{font-size: 16px;}  /* h1,h2,h3,字体大小设置  16个像素 */

        .l{float: left;}              /*  左浮动*/
        .r{float: right;}              /* 右浮动*/
        .clear{content: ""; display: block; clear: both;}    /* 清除浮动*/
             
             main{width: 366px;margin: 20px auto;}
             main.title{ height: 23px; line-height: 23px; font-size: 12px; font-weight: bold; padding-left: 30px;}
    </style> 
</head>
<body>
   <div id="main">
       <h2 class="title"> 外媒评论精选</h2>
       <ul>
           <li>
               <div class="pic">
                   <a href="#">
                       <img src="" alt="">
                   </a>
               </div>
               <div class="content"> 
                   <h2>测试标题测试标题</h2>
                   <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
                    段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落v
                    <a href="#">详细</a>
                   </p>
               </div>
           </li>

           <li>
            <div class="pic">
                <a href="#">
                    <img src="" alt="">
                </a>
            </div>
            <div class="content"> 
                <h2>测试标题测试标题</h2>
                <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
                 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落v
                 <a href="#">详细</a>
                </p>
            </div>
        </li>
        <li>
            <div class="pic">
                <a href="#">
                    <img src="" alt="">
                </a>
            </div>
            <div class="content"> 
                <h2>测试标题测试标题</h2>
                <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
                 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落v
                 <a href="#">详细</a>
                </p>
            </div>
        </li>
       </ul>
   </div> 
</body>
</html>
<!-- p142 集 -->